<template>
<div class="dashboard-container">
    <el-card class="head_card">
        <el-row type="flex" justify="center">
            <el-col :span="4">
                <div style="width: 100%;">
                    <img
                        v-imgErr="require('@/assets/common/bigUserHeader.png')"
                        style="border-radius: 50%; width: 110px; height: 110px; object-fit: cover;"
                        :src="userInfo.staffPhoto"
                        fit="cover"
                    />
                </div>
            </el-col>
            <el-col :span="20" class="hidden-xs-only">
                <div class="headInfoTip">
                    <p class="firstChild">早安，<span>{{ userInfo.username }}</span> 祝你开心每一天！！</p>
                    <p class="lastChild">{{ userInfo.username }} | {{ userInfo.companyName }} - {{ userInfo.departmentName }} - {{ userInfo.workNumber }} </p>
                </div>
            </el-col>
            <el-col :xs="{span: 20, offset: 5}" class="hidden-sm-and-up">
                <div class="headInfoTip">
                    <p class="firstChild"><span>{{ userInfo.username }}</span></p>
                    <p class="lastChild">{{ userInfo.username }} | {{ userInfo.companyName }} - {{ userInfo.departmentName }} - {{ userInfo.workNumber }} </p>
                </div>
            </el-col>
        </el-row>
    </el-card>
    <div class="main_card" style="margin-top: 30px;">
        <el-row type="flex" justify="center">
            <el-col :md="12" :xs="24">
                <!-- 日历-->
                <work-calendar />
                </el-card>
                <!-- 公告 -->
                <el-card class="box-card box-card_unFirst">
                    <div class="advContent">
                        <div class="title">公告</div>
                        <div class="contentItem">
                            <img src="@/assets/common/img.jpeg" alt="">
                            <div>
                                <p><span class="col">朱继柳</span> 发布了 第1期“传智大讲堂”互动讨论获奖名单公布</p>
                                <p>2018-07-21 15:21:38</p>
                            </div>
                        </div>
                        <div class="contentItem">
                            <img src="@/assets/common/img.jpeg" alt="">
                            <div>
                                <p><span class="col">朱继柳</span> 发布了 第2期“传智大讲堂”互动讨论获奖名单公布</p>
                                <p>2018-07-21 15:21:38</p>
                            </div>
                        </div>
                        <div class="contentItem">
                            <img src="@/assets/common/img.jpeg" alt="">
                            <div>
                                <p><span class="col">朱继柳</span> 发布了 第3期“传智大讲堂”互动讨论获奖名单公布</p>
                                <p>2018-07-21 15:21:38</p>
                            </div>
                        </div>
                    </div>
                </el-card>
                <!-- 公告 -->
            </el-col>

            <!-- 右侧内容 -->
            <el-col :md="12" :xs="24" class="rightCol">
                <!-- 流程申请-->
                <el-card class="box-card">
                    <div class="header headTit">
                        <span class="title">流程申请</span>
                    </div>
                    <div class="sideNav">
                        <el-button class="sideBtn" @click="isShowDeparture = true">加班离职</el-button>
                        <el-button class="sideBtn">请假调休</el-button>
                        <el-button class="sideBtn" @click="$router.push('/users/approvals')">审批列表</el-button>
                        <el-button class="sideBtn" @click="$router.push('/users/info')">我的信息</el-button>
                    </div>
                </el-card>

                <!-- 绩效指数-->
                <el-card class="box-card_unFirst">
                    <div class="header headTit">
                        <span class="title">绩效指数</span>
                    </div>
                    <div class="performance">
                        <RadarComponent />
                    </div>
                </el-card>

                <!-- 帮助链接-->
                <el-card class="box-card_unFirst">
                    <div class="header headTit">
                        <span class="title">帮助链接</span>
                    </div>
                    <div class="helper">

                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- 审批弹窗 -->
        <departure :is-show-departure.sync="isShowDeparture" />
    </div>
</div>
</template>

<script>
import departure from './components/departure.vue'
import { mapGetters } from 'vuex'
import workCalendar from './components/work-calendar.vue'
import RadarComponent from './components/Radar.vue'
export default {
	name: 'Dashboard',
	components: {
		'work-calendar': workCalendar,
		RadarComponent,
		departure
	},
	data() {
		return {
			isShowDeparture: false
		}
	},
	computed: {
		...mapGetters([
			'userInfo'
		])
	}
}
</script>

<style lang="scss" scoped>
	/* 公共 */
	.title{
		font-weight: bold;
		font-size: 20px;
	}
	.main_card{
		.box-card_unFirst{
			margin-top: 30px;
			.performance{
				margin-top: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.box-card{
			.contentItem{
				border-bottom: 1px solid #bbbbbb;
			}
		}
	}

	/* 小屏 */
	@media screen and (max-width:768px){
		.dashboard {
			&-container {
				margin: 0;
			}
		}
		.head_card{
			::v-deep.el-card__body{
				padding: 5px;
			}
			.headInfoTip{
				.firstChild{
					font-size: 16px;
					font-weight: bold;
					span{
						font-size: 24px;
						color: #2c7efa;
						font-weight: bold;
					}
				}
				.lastChild{
					font-size: 15px;
					color: #8c8c8c;
				}
			}
		}
		.main_card{
			.box-card{
				margin-top: 30px;
				.advContent{
					.contentItem{
						display: flex;
						justify-content: space-between;
						img{
							width: 25%;
							object-fit: cover;
						}
						div{
							flex: 1;
							p{
								font-size: 14px;
								span{
									color: #409eff;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
			.el-row{
				display: flex;
				flex-direction: column;
			}
		}
	}

	/* 大屏 */
	@media screen and (min-width:768px) and (max-width:1920px){
		.dashboard {
			&-container {
				margin: 30px;
			}
		}
		.head_card{
			::v-deep.el-card__body{
				padding: 20px 30px;
			}
			.headInfoTip{
				.firstChild{
					font-size: 16px;
					font-weight: bold;
					span{
						font-size: 24px;
						color: #2c7efa;
						font-weight: bold;
					}
				}
				.lastChild{
					font-size: 15px;
					color: #8c8c8c;
				}
			}
		}
		.main_card{
			.box-card{
				.advContent{
					.contentItem{
						display: flex;
						justify-content: space-between;
						img{
							width: 15%;
							object-fit: cover;
						}
						div{
							padding-left: 30px;
						}
						div{
							flex: 1;
							p{
								font-size: 18px;
								letter-spacing: 0.15rem;
								span{
									color: #409eff;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
			.el-row{
				.rightCol{
					padding-left: 30px;
					.sideNav{
						margin: 20px 0;
						display: flex;
						justify-content: center;
						.el-button{
							width: 140px;
						}
					}
				}
			}

		}
	}

</style>
